// 自定义指令
import { useIntersectionObserver } from '@vueuse/core'

// 默认图片
import defaultImg from '../assets/images/200.png'

import { App } from 'vue'
export default {
  install(app: App) { 
    // 全局指令
    app.directive('lazy', {
      // mounted是v3中自定义指令的生命周期，它会被自动调用
      // 他表示的涵义和组件中的mounted是一致的
      // el是dom元素
      mounted(el, binding) {
        // 设置默认图
        el.src = defaultImg
        // console.log('lazy', el, binding.value);
        // 实时监听el是否可见，如果可见，给他的src设置binding.value
        const {stop} = useIntersectionObserver(el, ([{isIntersecting}]) => {
          if(isIntersecting) {
            el.src = binding.value

            // 停止监听
            stop()
          }
        })
        
        // 如果图片加载失败，显示默认的图片
        el.onerror = () => {
          el.src =  defaultImg
        }
      }
    })
  }
}